<template>
  <div class="content">
    <div class="warpper">
      <div class="main">
        <CardHead>
          <template slot="title">网站导航</template>
          <template slot="desc">纪录文章，纪录网站</template>
        </CardHead>
        <div class="dmContent">
          <div class="navs-link">
            <span :class="selId == index?'active':''" @click="goNav(index,index)" v-for="(item, index) in timelineData" :key="item.id">{{ item.typename }}</span>
          </div>
          <ul class="navs-box" v-if="timelineData">
            <li class="time_line" v-for="(item, index) in timelineData" :key="item.id">
              <span :id="'nav' + index" class="nav-id"></span>
              <CardTitle v-if="item.lists && item.lists.length > 0">
                <template slot="title">{{ item.typename }}</template>
              </CardTitle>
              <div class="card-warpper">
                <a :href="link.nurl" target="_blank" class="card-link" v-for="(link, index1) in item.lists" :key="index1">
                  <div class="link-warpper">
                    <div class="link-img" v-lazy:background-image="link.nimg" :alt="link.ntitle" :title="link.ndetail"></div>
                    <!-- <img class="link-img" :src="link.nimg" :alt="link.ndetail" :title="link.ndetail"> -->
                    <div class="link-desc">
                      <p class="title">{{ link.ntitle }}</p>
                      <p class="detail">{{ link.ndetail }}</p>
                    </div>
                  </div>
                </a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import config from "@/utils/config";
import { Component, Prop, Vue, Emit } from "vue-property-decorator";
@Component({
  head() {
    return {
      title: "网站导航",
    };
  },
  async asyncData({ app }) {
    const res = await app.$axios.$get(config.BASE_URL + "/api/nav/list");
    return {
      timelineData: res.d.rows,
    };
  },
})
export default class extends Vue {
  timelineData: Array<any> = [1, 2, 3];
  selId: number = 0;

  created() {}
  goNav(id: string, index: number): void {
    (<HTMLElement>document.querySelector("#nav" + id)).scrollIntoView({
      behavior: "smooth",
    });
    this.selId = index;
  }
}
</script>
<style lang="scss" scoped>
.nav-id {
  margin-top: -100px;
  display: inline-block;
  height: 1px;
  width: 1px;
}
.dmContent {
  .navs-link {
    width: 100px;
    position: fixed;
    top: 208px;
    background: #fff;
    text-align: center;
    .active {
      color: #389ae3;
    }
    span {
      display: block;
      cursor: pointer;
    }
  }
  .navs-box {
    padding-left: 120px;
  }
}
.card-warpper {
  display: flex;
  flex-wrap: wrap;
  .card-link {
    width: 25%;
    height: 100px;
    padding: 6px 6px;
    .link-warpper {
      background-color: #fff;
      border-radius: 3px;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      padding: 6px;
    }
    .link-img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-size: cover;
    }
    .link-desc {
      margin-left: 10px;
      flex: 1;
      p {
        margin: 0;
      }
      .title {
        font-size: 16px;
        color: #012638;
        font-weight: bold;
      }
      .detail {
        height: 20px;
        color: #ccc;
        font-size: 12px;
        line-height: 20px;
        overflow: hidden;
      }
    }
  }
}
</style>
